$prefix: '.justice';

$bg-color:    rgb(0, 0, 0);
$label-color: rgb(223, 223, 223);
$pass-color:  rgb(65, 155, 163);
$warn-color:  rgb(212, 202, 61);
$fail-color:  rgb(206, 69, 45);

$container-padding: 10px;
$metric-height:     40px;
$metric-width:      150px;

#{$prefix} {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: $bg-color;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  font-size: 12px;
  font-family: monospace;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  z-index: 2147483647;
  transition: 400ms ease-in-out;
  direction: ltr;

  @media(min-width: 1235px) {
    padding-bottom: $container-padding;
  }

  &.closed {
    transform: translateY(100%);
  }

  #{$prefix}-metric-wrap {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
  }

  #{$prefix}-metric {
    height: $metric-height;
    display: inline-block;
    display: flex;
    align-items: center;
    margin: 10px 10px 0 0;

    &.chart {
      width: $metric-width * 2;
    }
  }

  #{$prefix}-title {
    text-transform: uppercase;
    padding: 3px 0.5em 3px 3px;
    color: $label-color;
  }

  #{$prefix}-text {
    color: $label-color;
    font-weight: 600;
  }

  #{$prefix}-text.pass {
    color: $pass-color;
  }

  #{$prefix}-text.warn {
    color: $warn-color;
  }

  #{$prefix}-text.fail {
    color: $fail-color;
  }

  #{$prefix}-toggle {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: $bg-color;
    position: absolute;
    right: 0;
    top: -20px;
    opacity: 0.5;
    border-top-left-radius: 50%;
    transition: 400ms ease-in-out;

    @media only screen and (min-device-pixel-ratio: 1.1) {
      width: 40px;
      height: 40px;
      top: -40px;
    }

    &:after {
      content: '';
      position: absolute;
      width: 50%;
      height: 50%;
      border-radius: 100%;
      margin: 5px;
      background-color: $label-color;

      transition: 400ms ease-in-out;

      @media only screen and (min-device-pixel-ratio: 1.1) {
        margin: 10px;
      }
    }
  }

  &.closed {
    #{$prefix}-toggle {
      opacity: 1;

      &:after {
        background-color: $pass-color;
      }
    }
  }

}
